import React, { useState, useEffect } from 'react'
import { Modal, Form, Input, DatePicker, Row, Col, Radio, InputNumber, Select } from 'antd'
import moment from 'moment'
import ItemClassification from '~/components/item-classification'
import { SAVETYPE, currencyType } from '~/constants'

const { TextArea } = Input
const { Option } = Select

const userInfo = JSON.parse(localStorage.getItem('u')!)

const layout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 }
}
const tailLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 }
}

const PropertySelect = ({
  setSelectVisible,
  visible,
  setSelectedItems,
  selectedItems,
  form,
  modifyIndex,
  saveType
}: any) => {
  const { validateFields, setFieldsValue } = form
  const [isShowDeposit, setIsShowDeposit] = useState(false)
  const [isShowItemDictionary, setIsShowItemDictionary] = useState(false)
  const [isShowDrugDictionary, setIsShowDrugDictionary] = useState(false)
  const [isCheckUnitName2, setIsCheckUnitName2] = useState(false)
  const [isCheckUnitName3, setIsCheckUnitName3] = useState(false)

  useEffect(() => {
    if (saveType === SAVETYPE.create) {
      setIsShowDeposit(false)
      setIsShowItemDictionary(false)
      setIsCheckUnitName2(false)
      setIsCheckUnitName3(false)
    }
  }, [visible, saveType])

  const onClickSaveItems = async () => {
    const values = await validateFields()
    const { itemClassification, acquireTime } = values
    const data = {
      acquireTime: acquireTime && moment(acquireTime).format(),
      categoryId1: itemClassification[0],
      categoryId2: itemClassification[1],
      categoryId3: itemClassification[2],
      categoryId4: itemClassification[3],
      caseCompanyCode: userInfo.companyCode,
      caseCompanyName: userInfo.companyName,
      caseDepartmentCode: userInfo.departmentCode,
      caseDepartmentName: userInfo.departmentName,
      caseType: 0,
      createCompanyCode: userInfo.companyCode,
      createCompanyName: userInfo.companyName,
      createDepartmentCode: userInfo.departmentCode,
      createDepartmentName: userInfo.departmentName,
      createUserName: userInfo.userName,
      createUserNo: userInfo.userNo,
      location: '小和山',
      locationNo: '333',
      picList: [
        {
          name: 'string',
          url: 'string'
        }
      ],
      ...values
    }
    if (saveType === SAVETYPE.update) {
      selectedItems[modifyIndex] = data
    } else {
      selectedItems.push(data)
    }
    setSelectedItems([...selectedItems])
    setSelectVisible(false)
  }

  return (
    <div>
      <Modal
        maskClosable={false}
        title="采集涉案财物信息"
        width={800}
        className="caiji-modal"
        visible={visible}
        okText="确定"
        cancelText="取消"
        onCancel={() => {
          setSelectVisible(false)
        }}
        onOk={onClickSaveItems}
      >
        <Form validateTrigger="onBlur" form={form} style={{ marginBottom: 16 }} className="modal-form" {...layout}>
          <Row>
            <Col span={12}>
              <Form.Item
                name="itemName"
                label="物品名称"
                rules={[{ required: true, message: '请输入物品名称', validateTrigger: 'onBlur' }]}
              >
                {isShowItemDictionary ? (
                  <Select>
                    {[...currencyType].map(([key, value], index) => (
                      <Option key={index} value={key}>
                        {value}
                      </Option>
                    ))}
                  </Select>
                ) : (
                  <Input />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="totalNumber" label="物品数量" rules={[{ required: true, message: '请输入物品数量' }]}>
                <InputNumber precision={2} style={{ width: 207 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="unitName" label="计量单位" rules={[{ required: true, message: '请输入计量单位' }]}>
                <Input disabled={isShowItemDictionary || isShowDrugDictionary} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="itemClassification"
                label="物品分类"
                rules={[{ required: true, message: '请选择物品分类' }]}
              >
                <ItemClassification
                  onChange={(value: any) => {
                    console.log('value', value)
                    setIsShowDeposit(value[0] === 'cw01' && value[1] === 'cw0101')
                    setIsShowItemDictionary(value[2] === 'cw010101')
                    // setIsShowDrugDictionary(value[2] === 'cw020603')
                    value[2] === 'cw010101' && setFieldsValue({ unitName: '元' })
                    value[2] === 'cw020201' && setFieldsValue({ unitName: '元' })
                    value[2] === 'cw020603' && setFieldsValue({ unitName: '克' })
                  }}
                />
              </Form.Item>
            </Col>
          </Row>
          {isShowDrugDictionary && (
            <Row>
              <Col span={12}>
                <Form.Item
                  name="itemdetail"
                  label="物品详细分类"
                  rules={[{ required: true, message: '请选择物品详细分类' }]}
                >
                  <Select>
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="disabled" disabled>
                      Disabled
                    </Option>
                    <Option value="Yiminghe">yiminghe</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          )}
          <Row>
            <Col span={12}>
              <Form.Item name="unitName2" label="二级计量单位">
                <Input
                  onChange={(e: any) => {
                    setIsCheckUnitName2(!!e.target.value)
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                rules={[{ required: isCheckUnitName2, message: '请输入二级计量转换率' }]}
                name="unitRate2"
                label="二级计量转换率"
              >
                <InputNumber />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="unitName3" label="三级计量单位">
                <Input
                  onChange={(e: any) => {
                    setIsCheckUnitName3(!!e.target.value)
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                rules={[{ required: isCheckUnitName3, message: '请输入三级计量转换率' }]}
                name="unitRate3"
                label="三级计量转换率"
              >
                <InputNumber />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item
                name="feature"
                label="物品特征"
                rules={[{ required: isShowItemDictionary, message: '请输入特征' }]}
              >
                <Input placeholder="请输入物品特征" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="specs" label="物品规格">
                <Input placeholder="请输入物品规格" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="idInfo" label="识别信息">
                <Input placeholder="请输入识别信息" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="acquireTime" label="执行时间">
                <DatePicker
                  placeholder="请选择执行时间"
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ width: 220 }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="propertyFlag" label="是否具有财产属性">
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="valuableFlag" label="是否贵重物品">
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="vulnerableFlag" label="是否易损益易贬值物品">
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          {isShowDeposit && (
            <>
              <Row>
                <Col span={12}>
                  <Form.Item name="depositUserName" label="存入人">
                    <Input placeholder="请输入存入人" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="depositTime" label="存入日期">
                    <DatePicker
                      placeholder="请选择存入日期"
                      showTime={{ format: 'HH:mm' }}
                      format="YYYY-MM-DD HH:mm:ss"
                      style={{ width: 220 }}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <Form.Item name="accountNo" label="存入账户">
                    <Input placeholder="请输入账户" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="amount" label="入账单据号">
                    <Input placeholder="请输入入账单据号" />
                  </Form.Item>
                </Col>
              </Row>
            </>
          )}
          <Row>
            <Col span={24}>
              <Form.Item name="remark" label="备注" {...tailLayout}>
                <TextArea rows={4} placeholder="请输入备注" style={{ width: 645 }} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
  )
}

export default PropertySelect
